<template>
    <view>
        <view class="hide-region" v-if="showHideRegion"></view>
        <view class="tab-bar shadow-0" id="tabbar">
            <view v-for="(item, index) in tabBarList" :key="index" class="tab-bar-item button" @click="switchTab(item, index)">
                <u-badge class="badge" v-if="index == 1" type="warning" max="99" :value="unreadCount"></u-badge>
                <u-badge class="badge" v-else-if="index == 3" type="warning" max="99" :value="unreadNoticeCount"></u-badge>
                <image class="img" :style="{ width: item.width ? item.width : iconSize, height: item.height ? item.height : iconSize }" :class="{ active: activeTab === index }" :src="activeTab === index ? item.selectedIconPath : item.iconPath"></image>
                <view class="tab-bar-title" :style="{ color: activeTab === index ? selectedColor : item.color ? item.color : color }">
                    {{ $t(item.text) }}
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'tabbar',
    props: {
        activeTab: {
            type: Number,
            default: 0,
        },
        showHideRegion: {
            type: Boolean,
            default: true,
        },
        unreadCount: {
            type: Number,
            default: 0,
        },
        unreadNoticeCount: {
            type: Number,
            default: 0,
        },
        iconSize: {
            type: String,
            default: '60rpx',
        },
    },
    data() {
        return {
            platform: '',
            color: '#9DA7B2',
            selectedColor: '#2C2C2C',
            tabBarList: [
                {
                    pagePath: '/pages/index/index',
                    text: 'home',
                    iconPath: '/static/images/tabbar/1-off.png',
                    selectedIconPath: '/static/images/tabbar/1-on.png',
                },
                {
                    pagePath: '/pages/info/index',
                    text: 'tongzhi',
                    iconPath: '/static/images/tabbar/2-off.png',
                    selectedIconPath: '/static/images/tabbar/2-on.png',
                },
                {
                    pagePath: '/pages/uqur/uqur',
                    text: 'yollax',
                    iconPath: '/static/images/tabbar/3-off.png',
                    selectedIconPath: '/static/images/tabbar/3-on.png',
                    width: '120rpx',
                    height: '120rpx',
                },
                 {
                    pagePath: '/pages/izdax/izdax',
                    text: 'izdax',
                    iconPath: '/static/images/tabbar/4-off.png',
                    selectedIconPath: '/static/images/tabbar/4-on.png',

                },
                {
                    pagePath: '/pages/my/index',
                    text: 'my',
                    iconPath: '/static/images/tabbar/5-off.png',
                    selectedIconPath: '/static/images/tabbar/5-on.png',
                },
            ],
        }
    },
    watch: {},
    mounted() {
        uni.hideTabBar({
            success: () => {},
            fail: () => {},
        })
    },

    created() {
        // #ifdef APP-PLUS
        this.platform = 'app'
        // #endif

        // #ifdef MP-WEIXIN
        this.platform = 'mp'
        // #endif
    },
    methods: {
        switchTab(item, index) {
            if (item.notTabPage) {
                this.$emit('switchTab', index)
                // let token = uni.getStorageSync('token')
                // if (token && !item.noLogin) return
                uni.navigateTo({
                    url: item.pagePath,
                })
                return
            }
            uni.switchTab({
                url: item.pagePath,
            })
        },
    },
}
</script>

<style scoped lang="scss">
.tab-bar {
    max-width: 1024px;
    margin: 0 auto;
    position: fixed;
    bottom: 0px;
    left: 0%;
    right: 0%;
    height: 126rpx;
    background: #f4f4f4;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 99;
    width: 100%;
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.tab-bar-item .badge {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding: 6rpx;
    width: 34rpx;
    height: 34rpx;
    color: #fff;
    font-size: 18rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    border: 1rpx solid #fff;
    border-radius: 50%;
}

.tab-bar-item:nth-child(3) .img {
    margin-top: -30rpx !important;
}
.tab-bar-item .tab-bar-title {
    margin-top: 8rpx !important;
    font-size: 26rpx;
}

.hide-region {
    height: calc(126rpx + env(safe-area-inset-bottom));
}

.badge {
    position: absolute;
    margin-top: 10rpx;
    margin-right: 20rpx;
}
</style>